<script setup lang="ts">
  const props = defineProps({
    bg: {
      type: String,
      default: 'bg1',
    },
    name: {
      type: String,
      default: '',
    },
    value: {
      type: [String, Number],
      default: '',
    },
    nameColor: {
      type: String,
      // #FFFFFF
      default: '#aaaaaa',
    },
    valueColor: {
      type: String,
      // #00F9FF
      default: '#c280ff',
    },
  });
</script>

<template>
  <div
    class="img-data flex flex-col"
    :class="{
      bg1: props.bg === 'bg1',
      bg2: props.bg === 'bg2',
      bg3: props.bg === 'bg3',
    }"
  >
    <div
      class="value"
      :class="{ 'value-far-top': props.bg == 'bg2' || props.bg == 'bg3' }"
      :style="{
        color: props.valueColor,
        top: props.bg === 'bg3' ? '-20px' : '-20px',
      }"
    >
      {{ props.value }}
      <slot name="unit"></slot>
    </div>
    <div
      class="name"
      :style="{
        color: props.nameColor,
        bottom: props.bg === 'bg3' ? '-12px' : '-28px',
      }"
      >{{ props.name }}</div
    >
  </div>
</template>

<style lang="less" scoped>
  .bg1 {
    background-image: url('@/assets/images/common/data_bg1.png');
  }
  .bg2 {
    background-image: url('@/assets/images/common/data_bg2.png');
    background-size: auto 100% !important;
  }
  .bg3 {
    position: relative;
    background-image: url('@/assets/images/common/data_bg3.png');

    background-size: 90% auto !important;
    background-position: center center !important;
    z-index: 0;

    &::after {
      content: '';
      display: block;
      width: 100%;
      height: 100%;
      position: absolute;
      z-index: -10;
      background-image: url('@/assets/images/common/data_bg3_bg.png');
      background-size: 110% 100%;
      background-position: center -18px;
      background-repeat: no-repeat;
    }
  }

  .bg3::after {
  }

  .img-data {
    text-align: center;
    width: 100%;
    padding-top: 20px;
    // background-image: url('@/assets/images/common/data_bg1.png');
    // background-size: 100% 100%;
    background-size: 100% auto;
    background-position: center center;
    background-repeat: no-repeat;

    .value {
      font-size: 20px;
      font-weight: bold;
    }

    .value-far-top {
      position: relative;
      top: -20px;
      margin-bottom: 30px;
    }

    .name {
      position: relative;
      bottom: -28px;
      // top: 34%;
    }
  }
</style>
